<template>
  <div class="phone-list">
    <div
      class="vm-propanels"
      v-for="(v, index) in phonelist"
      :key="index"
      @click="ping(index)"
    >
      <div class="img-propanels">
        <img :src="v.src" alt="" />
      </div>
      <div class="produce-propanels">
        <div class="p-name">
          <span v-show="v.new != ''">{{ v.new }}</span>
          {{ v.name }}
        </div>
        <div class="produce" v-show="v.produce != ''">{{ v.produce }}</div>
        <div class="price-more">
          <div>{{ v.price }}</div>
          <div class="more">{{ v.more }}</div>
        </div>
        <div class="sell-exchaange">
          <div class="sell" v-show="v.sell != ''">{{ v.sell }}</div>
          <div class="exchangeO">{{ v.exchangeO }}</div>
          <div class="exchangeT" v-show="v.exchangeT != ''">
            {{ v.exchangeT }}
          </div>
          <div class="exchangeTH" v-show="v.exchangeTH != ''">
            {{ v.exchangeTH }}
          </div>
        </div>
        <div class="assert-p">
          <p class="assert">{{ v.assert }}</p>
          <p class="assertp" v-show="v.assertp != ''">{{ v.assertp }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phonelist: [],
    };
  },
  mounted() {
    this.$http({
      url: "http://localhost:3000/flatboard",
      method: "GET",
    }).then((res) => {
      this.phonelist = res.data;
    });
  },
  methods: {
    ping(index) {
      if (index == 0) {
        this.$router.push("/thingdetails");
      }
    },
  },
};
</script>

<style scoped>
.phone-list {
  display: flex;
  flex-direction: column;
}
.vm-propanels {
  margin: auto;
  margin-top: 0.9375rem;
  width: 21.8881rem;
  height: 7.5rem;
  display: flex;
}
.img-propanels {
  width: 8.4625rem;
  height: 8.4625rem;
  display: flex;
  /* margin-top: .9375rem; */
}
.img-propanels img {
  width: 5.8587rem;
  height: 5.8587rem;
  margin: auto;
}
.produce-propanels {
  width: 12.375rem;
  display: flex;
  flex-direction: column;
  padding: 0.4125rem 0;
  margin-top: 0.9375rem;
}
.p-name {
  display: flex;
  font-size: 0.875rem;
  align-items: center;
}
.p-name span {
  display: inline-block;
  width: 1.7219rem;
  height: 0.8225rem;
  background-color: rgb(251, 142, 142);
  color: #fff;
  font-size: 0.5rem;
  text-align: center;
  line-height: 0.8225rem;
  border-radius: 0.2125rem;
  margin-right: 0.3125rem;
}
.produce {
  font-size: 0.5rem;
  color: #999;
}
.price-more {
  display: flex;
  align-items: center;
  margin-top: 0.625rem;
}
.price-more p {
  font-size: 0.9rem;
  font-weight: 700;
}
.price-more .more {
  display: inline-block;
  width: 2rem;
  height: 0.9113rem;
  border-radius: 0.2875rem;
  border: 1px solid rgb(83, 83, 251);
  color: rgb(83, 83, 251);
  font-size: 0.4rem;
  text-align: center;
  line-height: 0.9113rem;
  margin-left: 0.625rem;
}
.sell-exchaange {
  display: flex;
  width: 13.25rem;
  margin-top: 0.3125rem;
}
.sell-exchaange .sell {
  background: url()
    no-repeat;
  width: 4.4044rem;
  height: 0.95rem;
  background-size: 100%;
  color: #fa2a2d;
  font-size: 0.4rem;
  display: block;
  font-family: Helvetica;
  margin-left: 0.25rem;
  text-align: center;
}
.sell-exchaange .exchangeO,
.sell-exchaange .exchangeT,
.sell-exchaange .exchangeTH {
  display: inline-block;
  height: 0.9113rem;
  border-radius: 0.2875rem;
  border: 1px solid rgb(83, 83, 251);
  color: rgb(83, 83, 251);
  font-size: 0.4rem;
  text-align: center;
  line-height: 0.9113rem;
  margin-left: 0.2rem;
}
.assert-p {
  display: flex;
  font-size: 0.4rem;
  color: #999;
  height: 0.2rem;
  margin-top: 0.1875rem;
  margin-left: 0.1875rem;
}
.assert-p p:nth-child(1) {
  margin-right: 0.625rem;
}
</style>